<template>
  <div>
    <my-form-drawer
      :title="title"
      :width="450"
      :visible="visible"
      @ok="edit"
      @cancel="onClose"
    >
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="设备型号" prop="equiType">
          <a-select
            class="_select"
            placeholder="请选择设备型号"
            v-model="form.equiType"
            @change="onChange"
          >
            <a-select-option :key="item.key" v-for="item in typeArr">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="设备类型">
          <span v-if="form.equiType == 1 || form.equiType == 4"
            >全彩屏设备</span
          >
          <span v-else-if="form.equiType == 3">文字屏设备</span>
          <span v-else></span>
        </a-form-model-item>
        <a-form-model-item label="设备ID" prop="equiNum">
          <a-input v-model.trim="form.equiNum" :disabled="type == 1" />
        </a-form-model-item>
        <a-form-model-item label="设备名称" prop="equiName">
          <a-input v-model="form.equiName" />
        </a-form-model-item>
        <a-form-model-item
          v-show="form.equiType == 3"
          label="设备密钥"
          prop="equiSecret"
        >
          <a-input v-model.trim="form.equiSecret" />
        </a-form-model-item>
        <a-form-model-item label="设备地区" prop="equiArea">
          <a-cascader
            v-model="equiArea"
            :options="area"
            :fieldNames="{
              value: 'id',
              label: 'cityName',
              children: 'children',
            }"
            placeholder="请选择地区"
            @change="areaChange"
          />
        </a-form-model-item>
        <a-form-model-item label="具体地址" prop="equiAddress">
          <a-input v-model="form.equiAddress" />
        </a-form-model-item>
        <a-form-model-item label="所属组织" prop="deptId">
          <a-tree-select v-model="form.deptId" placeholder="请选择所属组织">
            <!-- 目前最多显示3级菜单 -->
            <template v-for="item in treeData">
              <a-tree-select-node
                :key="item.deptId"
                :value="item.deptId"
                :title="item.name"
              >
                <a-tree-select-node
                  v-for="node in item.children"
                  :key="node.deptId"
                  :value="node.deptId"
                  :title="node.name"
                >
                  <a-tree-select-node
                    v-for="node2 in node.children"
                    :key="node2.deptId"
                    :value="node2.deptId"
                    :title="node2.name"
                  >
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select-node>
            </template>
          </a-tree-select>
        </a-form-model-item>
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import { add,update } from "@/services/device";
import MyFormDrawer from "@/components/drawer/MyFormDrawer";
import area from "@/const/area";
// import { tree } from "@/services/tenant";
export default {
  name: "deviceForm",
  components: { MyFormDrawer },
  props: ["tenantId", "deptId","treeData"],
  data() {
    return {
      type: "0", //0添加，1编辑
      title: "",
      equiArea: [],
      form: {
        equiType: "",
        equiNum: "",
        equiName: "",
        equiSecret: "",
        equiArea: "",
        equiAddress: "",
        deptId: "",
        tenantId: "",
      },
      visible: false,
      rules: {
        equiType: [
          { required: true, message: "请选择设备型号", trigger: "blur" },
        ],
        equiNum: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
        equiName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "请选择设备所属组织", trigger: "change|blur" },
        ],
      },
      enabledArr: [
        { value: "0", label: "正常" },
        { value: "9", label: "停用" },
      ],
      typeArr: [
        { key: "1", name: "V1" },
        { key: "3", name: "V3" },
        { key: "4", name: "V4" },
      ],
    };
  },
  computed: {},
  created() {
    this.area = area;
  },
  watch: {
    tenantId(newVal) {
      this.form.tenantId = newVal;
    },
    deptId(newVal) {
      this.form.deptId = newVal;
    },
  },
  methods: {
    changeForm(state, action, data) {
      this.visible = state;
      this.type = action;
      this.title = this.type ? "编辑设备" : "新增设备";
      if (this.type) {
        this.form = Object.assign(this.form,data);
        this.equiArea = this.form.equiArea.split(',').map((item)=>{
          return parseInt(item)
        })
        this.form.equiArea = this.form.equiArea.split(',')[2];
        console.log(this.form);
      }
    },
    initData() {
      this.equiArea = [];
      this.form = {
        equiType: "",
        equiNum: "",
        equiName: "",
        equiSecret: "",
        equiArea: "",
        equiAddress: "",
        deptId: this.form.deptId,
        tenantId: this.form.tenantId,
      };
    },
    onClose() {
      this.visible = false;
      this.$refs["form"].clearValidate();
      this.initData();
    },
    edit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if(!this.type){
          add(this.form).then(({data}) => {
            if (data.code === 0) {
              this.$message.success("添加成功");
              this.onClose();
              this.$emit("getList");
            }
          });
        } else{
          update(this.form).then(({data}) => {
            if (data.code === 0) {
              this.$message.success("修改成功");
              this.onClose();
              this.$emit("getList");
            }
          });
        }
        
      });
    },
    areaChange() {
      this.form.equiArea = this.equiArea[2];
    },
    onChange(){
      if(this.form.equiType == '3'){
        this.rules = {
          equiType: [{ required: true, message: "请选择设备型号", trigger: "blur" }],
          equiNum: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
          equiName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
          deptId: [{ required: true, message: "请选择设备所属组织", trigger: "change|blur" }],
          equiSecret:[{ required: true, message: "请输入设备密钥", trigger: "blur" }]
        }
      } else{
        this.rules = {
          equiType: [{ required: true, message: "请选择设备型号", trigger: "blur" }],
          equiNum: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
          equiName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
          deptId: [{ required: true, message: "请选择设备所属组织", trigger: "change|blur" }],
        }
      }
    }
  },
};
</script>

<style lang="less" scoped></style>
